<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="4">
        <el-input v-model="inputNum" placeholder="请输入添加设备个数"></el-input>
      </el-col>
      <el-col :span="20">
        <el-button type="primary" @click="addDevice">添加设备</el-button>
      </el-col>
    </el-row>
    <div class="titles">测点正常值设置</div>
    <el-row :gutter="24">
      <el-col :span="6">
        电压：
        <el-input v-model="inputNum" class="input-formto"></el-input> - <el-input v-model="inputNum" class="input-formto"></el-input>
      </el-col>
      <el-col :span="5">
        温度：
        <el-input v-model="inputNum" placeholder="请输入报警阈值" class="normal-input"></el-input>
      </el-col>
      <el-col :span="5">
        电流：
        <el-input v-model="inputNum" placeholder="请输入报警阈值" class="normal-input"></el-input>
      </el-col>
      <el-col :span="5">
        漏电：
        <el-input v-model="inputNum" placeholder="请输入报警阈值" class="normal-input"></el-input>
      </el-col>
    </el-row>
    <div class="titles">心跳包设置</div>
    <el-row :gutter="24">
      <el-col :span="8" style="vertical-align: middle">
        <span style="vertical-align: -webkit-baseline-middle;">心跳包：</span>
        <el-input v-model="inputNum" class="normal-input">
          <template slot="append">分钟</template>
        </el-input>
      </el-col>
    </el-row>
    <el-table ref="multipleTable" @selection-change="handleSelectionChange"  key='0' :data="list" v-loading.body="listLoading" style="width: 100%">

    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <el-row :gutter="24">
      <el-col :span="3">
        <el-button type="primary" @click="addDevice">批量发送数据</el-button>
      </el-col>
      <el-col :span="2">
        <el-button  @click="addDevice">批量复位</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="addDevice">批量删除设备</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import $http from '@/utils/request'
    export default {
        name: 'test',
        data(){
          return {
            list:[],
            listLoading:false,
            inputNum:'',
            total: null,
            multipleSelection: [],
            listQuery: {
              page: 1,
              limit: 10,
              deviceNo: "",
            },
          }
        },
       methods:{
         addDevice(){

         },
         handleSizeChange(val) {
           this.listQuery.limit = val;
           this.getList();
         },
         handleCurrentChange(val) {
           this.listQuery.page = val;
           this.getList();
         },
         handleSelectionChange(val) {
           this.multipleSelection = val;
         }
       }
    }
</script>

<style scoped>
  .titles{
    padding:20px 0;
  }
  .input-formto{
    width: 100px;
  }
  .normal-input{
    width: 200px;
  }
</style>
